import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    canSelect: true,
    currentID: "",
    selectCompList: [],
    screenProps: {
      width: 1920,
      height: 1080,
      bkcolor: "#fff"
    }
  },
  getters: {
    curComp(state) {
      let currentID = state.currentID;
      if (currentID) {
        let currentComp = state.selectCompList.filter(item => {
          return item.uid === currentID
        })[0]
        return currentComp;
      }
      return {}
    },
    curStyle(state) {
      let currentID = state.currentID;
      if (currentID) {
        let currentComp = state.selectCompList.filter(item => {
          return item.uid === currentID
        })[0]
        return currentComp.info.style;
      }
      return {}
    }
  },
  mutations: {
    changeSelectFlag(state, payload) {
      state.canSelect = payload
    },
    addComp(state, payload) {
      state.selectCompList.push(payload)
      state.currentID = payload.uid
    },
    setSelect(state, payload) {
      state.currentID = payload
    },
    changeStyle(state, payload) {
      let newStyle = {}
      for (let item of state.selectCompList) {
        if (item.uid === state.currentID) {
          newStyle = { ...item.info.style, ...payload }
          item.info.style = Object.assign({}, newStyle)
          break
        }
      }
    },
    changeScreenProp(state, payload) {
      state.screenProps = Object.assign(state.screenProps, payload)
    }
  }
})

export default store